<template>
  <div class="search-tool">
    <!-- <el-input placeholder="搜索船舶" v-model="value" class="input-with-select">
      <el-button class="button" slot="append" icon="el-icon-search"></el-button>
    </el-input> -->
    <el-autocomplete
      class="input-with-select"
      v-model="value"
      :fetch-suggestions="querySearch"
      placeholder="请输入船舶名称"
      @select="handleSelect"
      @focus="handleFocus"
    >
      <template slot-scope="{ item }">
        <div class="name">
          <span style="float: left">{{ item.shipName }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{
            item.onlineFlag === "0" ? "在线" : "离线"
          }}</span>
        </div>
      </template>
      <el-button
        class="button"
        slot="append"
        icon="el-icon-search"
        @click="handleFocus"
      ></el-button>
    </el-autocomplete>
  </div>
</template>

<script>
import { getCurList } from "@/api/shipping/ship";
export default {
  data() {
    return {
      value: "",
      shipList: [],
    };
  },
  methods: {
    async handleFocus() {
      const { data } = await getCurList();
      this.shipList = data;
    },
    querySearch(queryString, cb) {
      var results = queryString
        ? this.shipList.filter(this.createFilter(queryString))
        : this.shipList;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.shipName
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(row) {
      this.$emit("showShip", row);
    },
  },
  created() {
    this.handleFocus();
  },
};
</script>

<style lang="scss" scoped>
.search-tool {
  position: absolute;
  top: 70px;
  left: 20px;
  z-index: 1000;
  .input-with-select {
    width: 350px;
    &::v-deep .el-input-group__append {
      border: 0;
    }
    .button {
      height: 40px;
      border-radius: 0;
      background-color: $base-theme-sub-color;
      color: #fff;
      margin: -8px -21px;
      &:hover {
        background-color: #3f89ee;
      }
    }
  }
}
</style>
